<template>
  <!-- 评论列表 -->
  <div class="" v-if="list">
    <div class="part-title">评论</div>
    <comment-list
      :list="list.rows"
      v-if="list.total"
      v-app-jump="{ to: `mtjimu://works?id=${info.workId}` }"
    ></comment-list>
    <!-- <div class="seeall" v-else>暂无评论</div> -->
    <div class="seeall" v-app-jump="{ to: `mtjimu://works?id=${info.workId}` }" v-if="list.total">
      查看全部评论（{{ list.total }}）
    </div>
    <button class="comment-btn" v-app-jump="{ to: `mtjimu://works?id=${info.workId}` }">
      <img src="../../assets/images/icon-pen.png" />
      发表评论
    </button>
  </div>
</template>

<script>
  import CommentList from 'comp/CommentList';
  export default {
    props: {
      info: {
        type: Object,
      },
    },
    data() {
      return {
        list: [],
      };
    },
    components: {
      CommentList,
    },
    mounted() {
      this.getComment();
    },
    methods: {
      getComment() {
        this.$service
          .CmCommentToplist({
            subjectId: this.info.workId,
            subjectType: this.info.workType,
            size: 6,
          })
          .then((res) => {
            this.list = res;
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
</script>

<style lang="less">
  .part-title {
    font-size: 1.7rem;
    margin-bottom: 1.7rem;
    &::before {
      content: '';
      bottom: -0.2rem;
      height: 1.1rem;
      border-radius: 0.6rem;
      opacity: 0.15;
    }
  }

  .comment-btn {
    width: 100%;
    height: 4.7rem;
    background-color: rgba(#ffffff, 0.05);
    font-size: 1.4rem;
    color: #ffffff;
    margin: 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 1.3rem;
      height: 1.3rem;
      margin-right: 0.5rem;
    }
  }

  .comment-list {
    .avatar {
      width: 3rem;
      height: 3rem;
      margin-right: 1rem;
    }

    .comment-item {
      margin-bottom: 1.5rem;

      span {
        font-size: 1.5rem;
      }
    }
  }
</style>
